<template>
    <el-card class="layout-query">
        <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
            <el-form-item prop="courseId">
                <el-input v-model="state.queryForm.courseName" placeholder="课程名"></el-input>
            </el-form-item>
            <el-form-item prop="classId">
                <el-input v-model="state.queryForm.className" placeholder="班级名"></el-input>
            </el-form-item>
            <el-form-item>
                <div class="block">
                    <span class="demonstration"></span>
                    <el-date-picker v-model="value1" type="datetimerange" start-placeholder="课程开始时间"
                        end-placeholder="课程结束时间" :default-time="defaultTime1" @change="handleDateChange" />
                </div>
            </el-form-item>
            <el-form-item>
                <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button icon="RefreshRight" @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <!-- <el-space>
            <el-space>
                <el-button icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
            </el-space>
            <el-space>
                <el-button icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>
            </el-space>
        </el-space> -->
        <el-table v-loading="state.dataListLoading" :data="state.dataList" border class="layout-table"
            show-overflow-tooltip @selection-change="selectionChangeHandle">
            <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
            <el-table-column prop="id" label="课程班级id" header-align="center" align="center"></el-table-column>
            <el-table-column prop="courseName" label="课程名称" header-align="center" align="center"></el-table-column>
            <el-table-column prop="className" label="班级名称" header-align="center" align="center"></el-table-column>
            <el-table-column prop="startTime" label="课程开始时间" header-align="center" align="center"></el-table-column>
            <el-table-column prop="endTime" label="课程结束时间" header-align="center" align="center"></el-table-column>
            <el-table-column prop="taskNum" label="作业数" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" header-align="center" align="center" width="450">
                <template #default="scope">
					<el-button type="primary" link @click="goToCreateTask(scope.row.id)">创建作业</el-button>
                    <el-button type="primary" link @click="goToTaskList(scope.row.id)">查看作业列表</el-button>
                    <el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                    <!-- <el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page="state.page" :page-sizes="state.pageSizes" :page-size="state.limit"
            :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle">
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" v-model:visible="addOrUpdateVisible"
            @refreshDataList="getDataList"></add-or-update>
    </el-card>
</template>

<script setup lang="ts" name="SmCourseTeacherIndex">
import { useCrud } from '@/hooks'
import { reactive, nextTick, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const value1 = ref('')
const state: IHooksOptions = reactive({
    dataListUrl: '/sm/course/teacher/page',
    deleteUrl: '/sm/course/teacher',
    queryForm: {
        startTime: '',
        endTime: '',
        courseId: '',
        classId: ''
    }
})
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0)
const queryRef = ref(null)
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref()

const addOrUpdateHandle = (id?: number) => {
    addOrUpdateVisible.value = true
    nextTick(() => addOrUpdateRef.value.init(id))
}

// 日期格式化函数
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    const hours = String(d.getHours()).padStart(2, '0');
    const minutes = String(d.getMinutes()).padStart(2, '0');
    const seconds = String(d.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const handleDateChange = (value) => {
    if (value && value.length === 2) {
        state.queryForm.startTime = formatDate(value[0]);
        state.queryForm.endTime = formatDate(value[1]);
    } else {
        state.queryForm.startTime = '';
        state.queryForm.endTime = '';
    }
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, downloadHandle, reset } = useCrud(state)

const resetForm = () => {
    // 确保 queryRef 有值并且包含 resetFields 方法
    if (queryRef.value && typeof queryRef.value.resetFields === 'function') {
        queryRef.value.resetFields();
    }
    // 清空日期时间选择器的值
    value1.value = null;
    // 清空查询表单里的时间字段
    state.queryForm.startTime = '';
    state.queryForm.endTime = '';
}

// 跳转创建作业页面
const goToCreateTask = (courseUserId: number) => {
    router.push({
        path: '/sm/task/createTask',
        query: {
            courseUserId
        }
    });
};

// 跳转查看作业列表
const goToTaskList = (courseClassId: number) => {
    router.push({
        path: '/sm/task/index',
        query: {
            courseClassId
        }
    });
};
</script>